<template>
  <div>
    <div class="center-w">
      <div class="head">
        <div class="title">产地管理</div>
        <div>
          <el-button size="small" type="success" @click="addClick"
            >添加产地</el-button
          >
          <el-input
            prefix-icon="el-icon-search"
            style="width: 200px;"
            size="small"
            v-model="formData.placeName"
            placeholder="请输入"
            clearable
            @input="getList()"
          ></el-input>
        </div>
      </div>
      <div style="overflow-y: scroll;height: 100%;">
        <el-table
          border
          :header-cell-style="{
            background: '#f3f6fa',
            color: '#555'
          }"
          size="mini"
          :data="tableData"
          @sort-change="onSortChange"
          :default-sort="{ order: 'ascending' }"
        >
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="id"
            width="50"
            label="ID"
          >
          </el-table-column>
          <el-table-column
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
            :show-overflow-tooltip="true"
            align="center"
            prop="producerName"
            label="产地名"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            width="200"
            label="创建时间"
          ></el-table-column>
          <el-table-column
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
            :show-overflow-tooltip="true"
            align="center"
            prop="sort"
            label="排序值"
            width="90"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="operate"
            label="操作"
            width="220"
          >
            <template slot-scope="scope">
              <el-button
                @click="editClick(scope.row)"
                size="mini"
                type="primary"
                >编辑</el-button
              >
              <el-button @click="delClick(scope.row)" size="mini" type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>

      <!-- 添加/编辑产地 -->
      <el-dialog :title="title" width="40%" :visible.sync="placeVisible">
        <div class="detail_container">
          <div class="detail_item">
            <div class="content">
              <div class="item_title">产地名：</div>
              <div class="item_info">
                <el-input
                  v-model="placeData.placeName"
                  placeholder="请输入产地名"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="detail_item" v-if="placeData.id">
            <div class="content">
              <div class="item_title">排序值：</div>
              <div class="item_info">
                <el-input-number
                  v-model="placeData.sort"
                  :min="1"
                  placeholder="请输入排序值"
                ></el-input-number>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="placeVisible = false">取 消</el-button>
          <el-button type="primary" @click="placeHandle">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import {
  getProducerList,
  addPlace,
  editPlace,
  delPlace
} from "../../api/place";
export default {
  components: { Pagination },
  data() {
    return {
      // 表格数据
      tableData: [],
      title: "添加",
      placeVisible: false,
      formData: {
        placeName: "",
        sort: null,
        orderBy: null
      },
      placeData: {
        id: "",
        placeName: "",
        sort: 250
      },
      //分页
      pageparm: {
        pageIndex: 1,
        size: 20,
        total: 1
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      let list = {
        Name: this.formData.placeName,
        OrderBy: this.formData.orderBy,
        PageIndex: this.pageparm.pageIndex,
        PageSize: this.pageparm.size
      };
      if (this.formData.sort || this.formData.sort == 0) {
        list.Sort = this.formData.sort;
      }
      const res = await getProducerList(list);
      if (res.code == 200 && res.data) {
        let { items, totalCount } = res.data;
        this.tableData = items;
        this.pageparm.total = totalCount;
      } else {
        this.tableData = [];
      }
    },

    //按字母排序
    onSortChange({ prop, order }) {
      this.formData.orderBy = prop;
      if (order == "ascending") {
        this.formData.sort = 1;
      } else if (order == "descending") {
        this.formData.sort = 0;
      } else {
        this.formData.sort = null;
        this.formData.orderBy = null;
      }
      this.getList();
    },

    // 添加按钮
    addClick() {
      this.title = "添加产地";
      this.placeVisible = true;
      this.placeData.placeName = "";
      this.placeData.sort = 1;
      this.placeData.id = null;
    },

    // 编辑按钮
    editClick(row) {
      this.placeVisible = true;
      this.title = "编辑产地";
      this.placeData.placeName = row.producerName;
      this.placeData.id = row.id;
      this.placeData.sort = row.sort;
    },

    // 提交
    async placeHandle() {
      if (this.placeData.id) {
        let list = {
          id: this.placeData.id,
          producerName: this.placeData.placeName,
          sort: this.placeData.sort
        };
        const res = await editPlace(list);
        if (res.code == 200) {
          this.$message.success("修改成功！");
          this.placeVisible = false;
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      } else {
        let list = {
          producerName: this.placeData.placeName,
          sort: this.placeData.sort
        };
        const res = await addPlace(list);
        if (res.code == 200) {
          this.$message.success("添加成功！");
          this.placeVisible = false;
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      }
    },

    //删除按钮
    delClick(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 调用删除接口
        delPlace({ id: row.id }).then(() => {
          this.$message.success("删除成功！");
          this.getList();
        });
      });
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.size = parm.size;
      this.getList();
    }
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 89vh;
  padding: 10px;
  border: 1px solid #ccc;
  //margin: 20px;
}

.title {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  margin-bottom: 10px;
}

.active {
  color: rgb(124, 134, 244) !important;
}

.head {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  justify-content: space-between;
}
.detail_container {
  width: 80%;
  margin: 0 auto;
  .detail_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .content {
      display: flex;
      align-items: center;
    }
    .item_title {
      width: 80px;
      color: rgb(69, 69, 69);
      font-family: 思源黑体;
      font-size: 16px;
      font-weight: 400;
    }
    .item_info {
      color: rgb(69, 69, 69);
      font-family: 思源黑体;
      font-size: 16px;
      font-weight: 400;
      margin-left: 20px;
    }
  }
}
</style>
